import pinsLess from "./pins.module.less";
import ArticleList from "@/components/articleList";
import LeftTab from "@/components/leftTab";
import SignIn from "@/components/signIn";
import ArticleBillboard from "@/components/articleBillboard";
import AuthorBillboard from "@/components/authorBillboard";
import Advertisement from "@/components/advertisement";
import CompanyInfo from "@/components/companyInfo";
import PinsInput from "./components/pinsInput/pinsInput";
import PinsList from "./components/pinsList/pinsList";
import useScrollbar from "@/hooks/useScrollbar";
import { useState, useEffect, useRef } from "react";
import { GetPinsTabsApi } from "@/http/api/article";
function Home() {
  const scrollbarStatus = useScrollbar().scrollDirection;
  const fixed = useScrollbar().fixed;
  const [tabList, setTabList] = useState([]);
  const PinsListRef = useRef<{ GetPinsList: () => void }>(null);
  const getTablist = async () => {
    const res: any = await GetPinsTabsApi();
    console.log("获取菜单结果", res);
    setTabList(res.tabList);
  };
  const reflash = () => {
    console.log("更新列表值");
    PinsListRef.current?.GetPinsList();
  };
  useEffect(() => {
    getTablist();
  }, []);
  return (
    <div className={pinsLess.PinsContent}>
      <div
        className={[
          "left_content",
          scrollbarStatus === "up" ? "" : "ToTop",
        ].join(" ")}
      >
        <LeftTab tabList={tabList} />
      </div>
      <div className="center_list_content">
        <div className="top_input">
          <PinsInput reflash={reflash} />
        </div>
        <div className="bottom_pins_list_content">
          <PinsList ref={PinsListRef} />
        </div>
      </div>
      <div className="right_content">
        {fixed == "fixed" ? (
          <div
            className={[
              "fiexed_all",
              scrollbarStatus === "up" ? "bottom_To" : "",
            ].join(" ")}
          >
            <div className="top_center_article_billboard">
              <ArticleBillboard />
            </div>
            <div className="center_author">
              <AuthorBillboard />
            </div>
          </div>
        ) : (
          <div className="no_fiexed">
            <div className="top_sign_in">
              <SignIn />
            </div>
            <div className="top_center_article_billboard">
              <ArticleBillboard />
            </div>
            <div className="center_author">
              <AuthorBillboard />
            </div>
            <div className="center_center_Advertisement">
              <Advertisement />
            </div>
            <div className="bottom_info">
              <CompanyInfo />
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

export default Home;
